<!-- 回款 -->
<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    label-width="100px"
    :size="formSize"
    status-icon
  >
    <el-form-item label="缴费名称" prop="type" required>
      <el-input v-model="ruleForm.type" readonly />
    </el-form-item>

    <el-form-item label="应收回款" prop="ReceivedMoney" required>
      <el-input v-model.number="ruleForm.ReceivedMoney" readonly />
    </el-form-item>

    <el-form-item label="回款金额" prop="money" required>
      <el-input
        v-model.number="ruleForm.money"
        readonly
        placeholder="请输入回款金额"
      />
    </el-form-item>

    <el-row>
      <el-col :span="12">
        <el-form-item prop="wechat" label="微信" required>
          <el-input
            v-model.number="ruleForm.wechat"
            @input="handleReceiveMoney"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="alipay" label="支付宝" required>
          <el-input
            v-model.number="ruleForm.alipay"
            @input="handleReceiveMoney"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item prop="cash" label="现金" required>
          <el-input
            v-model.number="ruleForm.cash"
            @input="handleReceiveMoney"
          />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="rests" label="其它支付" required>
          <el-input
            v-model.number="ruleForm.rests"
            @input="handleReceiveMoney"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="剩余欠款" prop="Arrearage">
      <el-input v-model.number="ruleForm.Arrearage" readonly />
    </el-form-item>

    <el-form-item label="回款时间" prop="time" required>
      <el-date-picker
        v-model="ruleForm.time"
        type="date"
        placeholder="请选择回款时间"
      />
    </el-form-item>
    <el-form-item label="收费备注" prop="descr">
      <el-input
        v-model="ruleForm.descr"
        placeholder="请输入收费备注内容"
        required
      />
    </el-form-item>

    <el-form-item>
      <el-button type="success" @click="submitForm(ruleFormRef)">
        立刻提交
      </el-button>
      <el-button type="danger" @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from "vue";
import type { FormInstance } from "element-plus";
import { StuExpendPost } from "../../../api/studentMoney";
import { StuMoneyPut } from "../../../api/students";
import { useRoute } from "vue-router";
interface MoneyForm {
  studentId?: string;
  name?: string;
  cardId?: string;
  phone?: string;
  carType?: string;

  type: string;
  ReceivedMoney: number;
  money: number;
  wechat: number;
  alipay: number;
  cash: number;
  rests: number;
  Arrearage: number;
  time: string;
  descr: string;
  isExpen: string;
}
const props = defineProps({
  Redata: String,
});

onMounted(() => {
  let {
    type,
    Arrearage,
    objectId,
    studentId,
    name,
    isExpen,
    cardId,
    phone,
    carType,
  } = JSON.parse(props.Redata as string);
  id.value = objectId;
  ruleForm.value.name = name;
  ruleForm.value.studentId = studentId;
  ruleForm.value.cardId = cardId;
  ruleForm.value.phone = phone;
  ruleForm.value.carType = carType;

  ruleForm.value.type = type;
  ruleForm.value.ReceivedMoney = Arrearage;
  ruleForm.value.Arrearage = Arrearage;
  ruleForm.value.isExpen = isExpen;
});

watch(
  () => props.Redata,
  () => {
    let {
      type,
      Arrearage,
      objectId,
      studentId,
      name,
      isExpen,
      cardId,
      phone,
      carType,
    } = JSON.parse(props.Redata as string);
    id.value = objectId;

    ruleForm.value.name = name;
    ruleForm.value.studentId = studentId;
    ruleForm.value.cardId = cardId;
    ruleForm.value.phone = phone;
    ruleForm.value.carType = carType;

    ruleForm.value.type = type;
    ruleForm.value.ReceivedMoney = Arrearage;
    ruleForm.value.Arrearage = Arrearage;
    ruleForm.value.isExpen = isExpen;
  }
);

const emit = defineEmits(["update:modelValue", "handleRefresh"]);
const route = useRoute();
console.log("回款", route.query);
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = ref<MoneyForm>({
  studentId: "",
  name: "",
  cardId: "",
  phone: "",
  carType: "",

  type: "",
  ReceivedMoney: 0,
  money: 0,
  wechat: 0,
  alipay: 0,
  cash: 0,
  rests: 0,
  Arrearage: 0,
  time: "",
  descr: "",
  isExpen: "",
});
// 当前数据的ID
let id = ref("");
const handleReceiveMoney = () => {
  ruleForm.value.money =
    ruleForm.value.wechat +
    ruleForm.value.alipay +
    ruleForm.value.cash +
    ruleForm.value.rests;
  ruleForm.value.Arrearage =
    ruleForm.value.ReceivedMoney - ruleForm.value.money;

  if (ruleForm.value.Arrearage <= 0) {
    ruleForm.value.Arrearage = 0;
  }
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      let Stumoney = { Arrearage: 0 };
      StuMoneyPut(id.value, Stumoney);

      StuExpendPost(ruleForm.value).then(() => {
        formEl.resetFields();
        emit("update:modelValue", false);
        emit("handleRefresh");
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

// const options = Array.from({ length: 10000 }).map((_, idx) => ({
//   value: `${idx + 1}`,
//   label: `${idx + 1}`,
// }));
</script>
